<template>
  <div class="about-store flex">
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">关于我们-查找门店</div>
    <div class="about-content main">
      <div class="padding">
        <div class="about-search">
          <form action="">
            <input name="city" v-model="shop_name" @keyup.enter.native="submit" type="text" placeholder="请输入城市名称" class="city-name">
            <button @click.prevent="submit" type="submit" class="search-store">搜索</button>
          </form>
        </div>
      </div>
      <div class="padding about-store-list" v-show="!bool">
        <div class="s-store_box" v-for="item in mapArr" :key="item.title">
          <div class="border">
            <p class="s-title">{{item.title}}</p>
            <p class="s-address clearfix"><span class="s-address-head">地址：</span><span class="s-address-body">{{item.address}}</span></p>
            <p class="s-phone"><span class="s-address-head">电话：</span>{{item.telphone}}</p>
          </div>
          <div class="operation">
            <a href="javascript:;" @click="getLocation(item)" class="nav">
              <img src="@/assets/img/nav.png" alt="" width="25px">导航
            </a>
            <a :href="'tel:' + item.telphone" class="phone">
              <img src="@/assets/img/phone.png" alt="" width="25px">拨号
            </a>
          </div>
        </div>
      </div>
    </div>
    <div v-show="bool" style="height: 6.8rem;">
      <baidu-map id="map" :center="center" :zoom="zoom" @ready="handler" style="height: 100%;overflow: hidden;"
        :scroll-wheel-zoom='true'>
        <bm-marker :position="center" :dragging="true" @click="infoWindowOpen">
          <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">{{address}}</bm-info-window>
        </bm-marker>
      </baidu-map>
    </div>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>
<script>
  import {
    getMap,
  } from '@/api/index'
  import {
    Toast
  } from 'vux'
  export default {
    data() {
      return {
        type: this.$route.query.type ? this.$route.query.type : 0,
        center: {
          lng: 0,
          lat: 0
        },
        address: '',
        zoom: 18,
        shop_name: '',
        mapArr: [],
        show: true,
        bool: true
      }
    },
    methods: {
      getType(type) {
        this.type = type
      },
      getMap() {
        return new Promise((resovle, reject) => {
          getMap({
            shop_name: this.shop_name
          }).then(res => {
            const {
              code,
              msg,
              data
            } = res
            if (code == 200) {
              let res = data.rows
              if (res.length > 0) {
                resovle(res)
              } else if (res.length == 0) {
                this.$vux.toast.text('暂无数据', 'top')
              }
            }
          });
        })
      },
      handler({
        BMap,
        map
      }) {
        this.getMap().then((res) => {
          this.mapArr = res
          this.center.lat = res[0].lat
          this.center.lng = res[0].lng
          this.address = res[0].address
          var point = new BMap.Point(res[0].lat, res[0].lng)
          map.centerAndZoom(point, this.zoom)
        })
      },
      submit() {
        this.getMap().then((res) => {
          this.bool = false
          this.mapArr = res
        })
      },
      getLocation(item) {
        this.bool = true
        this.center.lat = item.lat
        this.center.lng = item.lng
        this.address = item.address
      },
      infoWindowClose() {
        this.show = false
      },
      infoWindowOpen() {
        this.show = true
      }
    },
  }
</script>

<style lang="less" scoped>
  #map {
    width: 100%;
    overflow: hidden;
  }

  .about-store {

    .padding {
      padding: 0 0.21rem;
    }

    .about-search {
      position: relative;
      width: 100%;
      height: 0.81rem;
      margin: 0.4rem 0;
      border: 1px solid #000;
      box-sizing: border-box;

      form {
        width: 100%;
        height: 100%;
      }

      .city-name {
        display: block;
        width: 100%;
        height: 100%;
        padding-left: 1em;
        box-sizing: border-box;
      }

      .search-store {
        position: absolute;
        top: 0;
        right: 0;
        width: 1.9rem;
        text-align: center;
        padding-left: 0.27rem;
        height: 100%;
        background: url(../../assets/img/f_search.png) no-repeat center left 0.45rem #2e2e2e;
        color: #fff;
        outline: none;
      }
    }

    .about-store-list {
      margin-top: 0.36rem;
    }

    .s-store_box {
      border: 1px solid #eaeaea;
      margin-bottom: 0.27rem;

      .border {
        padding: 0.18rem;
      }

      p {
        display: flex;
      }
    }

    .s-title {
      font-size: 16px;
      margin-bottom: 10px;
    }

    .s-address-head {
      display: inline-block;
      width: 0.88rem;
    }

    .operation {
      display: flex;
      border-top: 1px #eaeaea solid;

      a {
        display: block;
        width: 50%;
        height: 0.72rem;
        line-height: 0.72rem;
        text-align: center;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      a:first-child {
        border-right: 1px #eaeaea solid;
      }
    }
  }
</style>
